<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>mnhart. imagine, design, build</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
        <div>TODO write content</div>
        
        
        
        <ul>
    <li><a title="fuck" href="#myModal" data-toggle="modal" data-img-url="images/webdesign/neurostar.jpg">6 Teams</a></li>
<li><a href="#myModal" data-toggle="modal" data-img-url="http://placehold.it/200x200/dddddd/ffffff&text=Hey3">5 Teams</a></li>
<li><a href="#myModal" data-toggle="modal" data-img-url="http://placehold.it/200x200/dddddd/ffffff&text=Hey4">4 Teams</a></li>
<li><a href="#myModal" data-toggle="modal" data-img-url="http://placehold.it/200x200/dddddd/ffffff&text=Hey5">3 Teams</a></li>
</ul>
        <div id="change"></div>

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
    <img src=""/>
    <h3 class="democontainer"></h3>
    <div class="urls"></div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
    </div>
</div>

        
        
        
        
        
        
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $('li a').click(function(e) {
    var title=$(this).attr('title'); 
    $('#myModal img').attr('src', $(this).attr('data-img-url')); 
    $('.democontainer').text('<p>This is a test.</p>');
    $('.urls').text(title);
});
    
</script>
    </body>
</html>
